<template>
  <view class="hot-video-container">
    <!-- 视频部分  -->
    <view class="video">
      <video :danmu-list="danmuList" class="myVideo" id="myVideo" :src="videoData.play_url" enable-danmu="true" danmu-btn controls></video>
    </view>
    <!-- 主要标题 -->
    <view class="title">{{ videoData.title }}</view>
    
    <!-- 底部区域 -->
    <view class="bottom" @click="$emit('click',videoData)">
      <view class="left">
        <image
          :src="videoData.author_avatar"
          mode="aspectFit"
          class="avatar"
        />
        <text class="txt">{{ videoData.source_name }}</text>
      </view>
      <view class="right">
        <uni-icons
          type="tune"
          size="24"
          class="icons"
        />
        <text class="playTxt"> {{ videoData.fmplaycnt }} </text>
      </view>
    </view>
    
    
  </view>
</template>

<script>
import { getRandomColor } from '../../utils';
import video from '../../store/modules/video';

// import {mapState} from 'vuex'

  export default {
    name:"hot-video-item",
    props:{
      videoData:{
        type:Object,
        required:true
      },
      danmuList:{
        type:Array
      }
    },

    data() {
      return {
        videoContext:null,
        // commentList:[]
       
        
      };
    },
    onReady(){
      this.videoContext=uni.createVideoContext('myVideo')
      // console.log('onReady');
      // console.log(this.videoContext);      
    },
    methods:{
      onSendDanmu(data){
        // console.log('子组件被调用了');
        // console.log(this.videoContext);
        this.videoContext= this.getVideo()
        // console.log(this.videoContext);
        this.videoContext.sendDanmu({
          text:data.info.content,
          color:getRandomColor()
        })
        this.$emit('CommentListChange',data.info)
        // this.danmuList.unshift(data.info)
      },
      //哈哈哈，我自己想出来的办法，通过一个函数获取videoContext
      getVideo () {
        return uni.createVideoContext('myVideo')
      }
      

    },
    computed:{
      // ...mapState('video',['danmuList'])
    }
  }
</script>

<style lang="scss" scoped>
.hot-video-container{
  position: relative;
  .myVideo{
    width: 100%;
  }
  .title{
    position:absolute;
    top:5px;
    left: 5px;
    color:white;
    font-size: 15px;
  }
  .bottom{
    display: flex;
    justify-content: space-between;
    padding:5px 8px 15px 8px;
    .left{
      display: flex;
      align-items: center;
      .txt{
        margin-left: 3px;
        font-size: 15px;
        color:#3f3f3f;
      }
    }
    .right{
      display: flex;
      align-items: center;
     
      .playTxt{
        margin-left: 3px;
        font-size: 12px;
        color: grey;
      }
    }
  }

}

</style>